<template>
  <ex-dialog
    width="600px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    :close-on-click-modal="false"
    @closeDialog="handleClose"
  >
    <div class="main" v-loading="loading">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="disabled" >
        <el-row>
          <el-col :span="24">
            <el-form-item label="管辖区域：" prop="govAreaId">
              <el-select v-model="ruleForm.govAreaId" filterable placeholder="请选择" @change="areaIdChange">
                <el-option v-for="item in optionsArea" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item> 
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="行业：" prop="industryId">
              <el-select placeholder="请选择" v-model="ruleForm.industryId" @change="parentChange">
                <el-option v-for="item in typeLs2" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item> 
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="子行业：" prop="subIndustryIdList">
              <el-select placeholder="请选择" multiple v-model="ruleForm.subIndustryIdList" @change="parentChange2">
                <el-option v-for="item in typeLs3" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item> 
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提醒内容：" prop="content">
              <el-input
                type="textarea"
                :rows="10"
                maxlength="200"
                placeholder="请输入内容"
                v-model="ruleForm.content">
              </el-input>
            </el-form-item> 
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="button_box">
      <el-button @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        :loading="AgreeLoading"
        @click="submitForm('ruleForm')"
      >确认提交</el-button>
    </div>
  </ex-dialog>
</template>
<script>
import Loading from "@/components/Loading/index";
// api
import {
  shopTypeList,
  limitshopTypeList,
  addIndustry,
  editIndustry,
  getDetail,
} from "@/api/setting/industryQualifications";
import {
  userAreaSelect,
  areaList
} from "@/api/common"
export default {
  components: {
    Loading,
  },
  props: {
    pathType: String,
    id: String,
    visible: Boolean,
  },
  data() {
    return {
      labelWidth: "150px",
      inputWidth: "420px",
      title: "新增标签",
      loading: false,
      disabled: false,
      AgreeLoading: false,
      optionsArea: [],//区域数组
      typeLs2: [],
      typeLs3: [],
      areaIdTwo: '',
      ruleForm: {
        id: '',
        govAreaId: '',//区域id
        subIndustryIdList: [],//子店铺行业类型数组
        industryId: '',//
        parentName: '',//
        content: '',
      },
      rules: {
        govAreaId: [
          { required: true,message: '请选择',trigger: ["change"]}
        ],
        industryId: [
          { required: true,message: '请选择',trigger: ["change"]}
        ],
        subIndustryIdList: [
          { required: true,message: '请选择',trigger: ["change"]}
        ],
        content: [
          {required: true,message: '请输入',trigger: ["bulr","change"]}
        ],
       
      },
      
    };
  },
  computed: {},
  created() {
    console.log('')
    if(this.pathType == 'edit'){
      this.title = '编辑提醒'
      this.getinfo()
    }else{
      this.title = '新增提醒'

    }
    this.getAreaList()
    this.getlimitshopTypeList()
  },
  mounted() {
   
    
  },
  computed: {},
  methods: {
    //查询区域下拉框
    getAreaList() { 
      areaList().then(res => {
        this.optionsArea = res.result
      }).catch(() => {})
    },
    //获取详情
    getinfo(){
      var id = this.id
      getDetail(id).then(res => {
          this.ruleForm = res.result
          this.getlimitshopTypeListTow(this.ruleForm.industryId) 

      })
    },

    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },
   
    areaIdChange(id){ //区域选择
      console.log(id)
      
    },

    getlimitshopTypeList() {
      shopTypeList()
        .then((res) => {
          this.typeLs2 = res.result;
        })
        .finally(() => {
          // this.loading = false;
        });
    },
    getlimitshopTypeListTow(id) {
      //新增或者编辑时查询店铺行业(二级)
      limitshopTypeList(id)
        .then((res) => {
          this.typeLs3 = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    parentChange(id) {
      //一级
      console.log(id);
      // var list = this.typeLs2
      // list.forEach(item => {
      //   if(item.id == id){
      //     this.ruleForm.industryId = item.id;
      //     this.ruleForm.parentName = item.value;
      //   }
      // });
      this.ruleForm.subIndustryIdList = [];
      this.getlimitshopTypeListTow(this.ruleForm.industryId);
    },
    parentChange2(item) {
      //二级
      console.log(item);
    },
    submitForm(formName) {
      console.log(this.ruleForm);
      //创建确定
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.AgreeLoading = true
          var data = {
            ...this.ruleForm
          }
          if(this.pathType == 'add'){
            addIndustry(data).then(res => {
              this.handleClose()
              this.$message.success('创建成功')
              this.$emit('success')
              this.AgreeLoading = false
            }).finally(()=>{
              this.AgreeLoading = false
            })
          }else if(this.pathType == 'edit'){
            editIndustry(data).then(res => {
              this.handleClose()
              this.$message.success('操作成功')
              this.$emit('success')
              this.AgreeLoading = false
            }).finally(()=>{
              this.AgreeLoading = false
            })
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    editForm(formName, status) {
      //编辑确定
      console.log(this.ruleForm);
      this.$refs[formName].validate(valid => {
        if (valid) {
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}
.el-select{
  width: 100%;
}
.main {
  padding: 20px 20px;
}
.richText {
  border: 1px solid #ccc;
  line-height: normal;
}
.stockNum{
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.button_box{
  display: flex;
  justify-content: center;
}
.equityImgBox{
  width: 100%;
  display: flex;
  justify-content: center;
}
.equityImgBox img{
  width: 120px;
  height: 120px;
}
.el-form-item{
  margin-bottom: 32px;
}
.list_start{
  display: flex;
  justify-content: flex-start;
  .heng{
    margin: 0 10px;
  }
  .el-input{
    width: 180px;
  }
}
</style>
